<template>
  <view class="apply-container-from">
    <u--form labelPosition="left" :model="form" ref="uForm">
      <u-form-item
        labelWidth="200rpx"
        label="小区组织状态"
        borderBottom
        required
        ref="item1"
      >
        <u--input
          v-model="form.name"
          border="none"
          placeholder="请选择"
          @input="$emit('input', form)"
        ></u--input>
        <u-icon
          color="#E7E6E6"
          slot="right"
          name="arrow-right"
        ></u-icon>
      </u-form-item>
      <u-form-item
        labelWidth="200rpx"
        label="申请人姓名"
        borderBottom
        required
        ref="item2"
      >
        <u--input
          v-model="form.applicantName"
          border="none"
          placeholder="请输入申请人姓名"
          @input="$emit('input', form)"
        ></u--input>
      </u-form-item>
      <u-form-item
        labelWidth="200rpx"
        label="申请人类型"
        borderBottom
        required
        ref="item3"
      >
        <u--input
          v-model="form.applicantType"
          border="none"
          placeholder="请选择申请人类型"
          readonly
          @click="$emit('typePicker')"
        ></u--input>
        <u-icon
          color="#E7E6E6"
          slot="right"
          name="arrow-down"
        ></u-icon>
      </u-form-item>
      <u-form-item
        labelWidth="200rpx"
        label="开通原因"
        borderBottom
        required
        ref="item4"
      >
        <u--input
          v-model="form.reason"
          border="none"
          placeholder="请输入开通原因"
          @input="$emit('input', form)"
        ></u--input>
      </u-form-item>
      <u-form-item
        labelWidth="200rpx"
        label="详细地址"
        required
        ref="item5"
      >
        <u--textarea height="40" border="none" v-model="form.address" placeholder="请输入内容" @input="$emit('input', form)" />
      </u-form-item>
    </u--form>
  </view>
</template>

<script>
export default {
  name: 'ApplyForm',
  props: {
    form: {
      type: Object,
      required: true
    },
    showTypePicker: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
.apply-container-from {
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0,0,0,0.03), 0rpx -14rpx 16rpx 0rpx rgba(20,77,169,0.09);
  border-radius: 16rpx;
  padding: 0rpx 30rpx;
  margin-top: -10px;
  z-index: 10000;
  position: relative;
}
.u-form-item__body {
  padding: 30rpx 0 !important;
}
.u-textarea__field {
  text-align: right;
}
</style> 